<template>
<!-- 权限管理页面 -->
  <div class="container">
    <div class="app-container">
      <el-button type="success" size="mini" class="btn" @click="showdialog=true;isAdd=true">添加权限</el-button>
      <el-table :data="list"
      row-key="id"
      default-expand-all
         >
        <el-table-column prop="name" label="名称" align="center" width="200px"/>
        <el-table-column prop="code" label="表示" align="center" width="200px"/>
        <el-table-column prop="description" label="描述" align="center" />
        <el-table-column label="操作" align="center" >
          <template v-slot="{row}">
            <!-- 二级节点不需要添加按钮 -->
            <el-button @click="highlight(row.id)"  v-if="row.type === 1" size="mini" type="text">添加</el-button>
            <el-button size="mini" type="text" @click="bianji(row.id)">编辑</el-button>
            <el-button size="mini" type="text" @click="open(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <shoDialog ref="son" @fuckchange="getTreeList" :isAdd="isAdd" :showdialog.sync="showdialog" :id="id" :type="type"></shoDialog>
  </div>
</template>
<script>
import { transitionTree } from '@/utils'
import { getPermissionList ,delPermission} from '@/api/permission'
import shoDialog from './showdialog'
export default {
  name: 'Permission',
  components: {
    shoDialog
  },
  data () {
    return {
      list:[],
      showdialog:false,
      type:1,
      id:0,
      isAdd:true
    }
  },
  created () {
    this.getTreeList()
  },
  methods: {
    // 获取权限列表 转为树形数组
   async getTreeList(){
       this.list = transitionTree(await getPermissionList(),0 )
    },
    highlight(id){
        this.isAdd = true
        this.id = id
        this.type = 2
        this.$nextTick(() => {
          this.showdialog = true
        })
    },
    // 编辑
   async bianji(id){
        await this.$refs.son.xixi(id)
          this.showdialog = true
          this.isAdd = false
    }, 
    open(id){
  this.$confirm('确认删除该权限点吗？','删除提示',{
    confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
  }).then(async () => {
     await delPermission(id)
     this.$message.success('删除成功')
     this.getTreeList()
  })
 }
 
  }
}
</script>
<style scoped>
.btn{
  margin: 20px;
}
</style>